﻿@model TopMenuModel
@using Nop.Core.Domain
@using Nop.Core.Infrastructure
@using Nop.Web.Models.Catalog;
@{
    var isRtl = this.ShouldUseRtlTheme();
    var supportResponsive = EngineContext.Current.Resolve<StoreInformationSettings>().ResponsiveDesignSupported;
}
@helper RenderCategoryLine(CategorySimpleModel category, int level, bool responsiveMobileMenu)
{
    <li>
        <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
        @if (category.NumberOfProducts.HasValue)
        {
            <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
        }
        </a>
        @{
            var levelClass = "";
            if (level == 0)
            {
                levelClass = "firstLevel";
                <div class="top-menu-triangle"></div>
            }
            if (category.SubCategories.Count > 0)
            {
                if (responsiveMobileMenu)
                {
                    <span class="expand">&nbsp;</span>
                }
                <ul class="sublist @levelClass">
                    @foreach (var subCategory in  category.SubCategories)
                    {
                        @RenderCategoryLine(subCategory, level + 1, responsiveMobileMenu)
                    }
                </ul>
            }
        }
    </li>
}

<ul class="top-menu">
    @Html.Widget("header_menu_before")

    @foreach (var category in Model.Categories)
    {
        @RenderCategoryLine(category, 0, false)
    }
    @foreach (var topic in Model.Topics)
    {
        <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
    }
    @if (Model.Categories.Count == 0 && Model.Topics.Count == 0)
    {
        //no categories or topis to display? in this case let's diplay some default menu items (should we?)
        <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
        if (Model.RecentlyAddedProductsEnabled)
        {
            <li><a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
            </li>
        }
        <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
        <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
        if (Model.BlogEnabled)
        {
            <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
        }
        if (Model.ForumEnabled)
        {
            <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
        }
        <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
    }
    @Html.Widget("header_menu_after")
</ul>

<script type="text/javascript">
    $('li', '.top-menu').on('mouseenter', function () {
        $('a', $(this)).first().addClass('hover');
        if (!$(this).parent().hasClass('top-menu')) {
            var width = $(this).innerWidth();
            $('.sublist', $(this)).first().css('@(isRtl ? "right" : "left")', width + 15);
        }
        $('.sublist', $(this)).first().addClass('active');
        $('.top-menu-triangle', $(this)).addClass('active');
    });

    $('li', '.top-menu').on('mouseleave', function () {
        $('a', $(this)).first().removeClass('hover');
        $('.sublist', $(this)).first().removeClass('active');
        $('.top-menu-triangle', $(this)).removeClass('active');
    });

</script>

@if (supportResponsive)
{
    <div id="mob-menu-button">
        <a href="">
            <span class="icon"><span class="line"></span><span class="line"></span><span class="line"></span></span>
            @{
                var responsiveMenuTitle = Model.Categories.Count > 0 ? T("Categories") : T("Menu");
            }
            <span>@responsiveMenuTitle</span>
        </a>
    </div>
    <ul class="mob-top-menu">
        @Html.Widget("mob_header_menu_before")
        @foreach (var category in Model.Categories)
        {
            @RenderCategoryLine(category, 0, true)
        }
        @foreach (var topic in Model.Topics)
        {
            <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
        }
        @if (Model.Categories.Count == 0 && Model.Topics.Count == 0)
        {
            //no categories  or topis to display? in this case let's diplay some default menu items (should we?)
            <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
            if (Model.RecentlyAddedProductsEnabled)
            {
                <li>
                    <a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
                </li>
            }
            <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
            <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
            if (Model.BlogEnabled)
            {
                <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
            }
            if (Model.ForumEnabled)
            {
                <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
            }
            <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
        }
        @Html.Widget("mob_header_menu_after")
    </ul>
    <script type="text/javascript">
        $('a', $('#mob-menu-button')).toggle(function() {
                $('.mob-top-menu').addClass('show');
            },
            function() {
                $('.mob-top-menu').removeClass('show');
            }
        );

        $(function($) {
            $('.mob-top-menu .expand').click(function() {
                var parent = $(this).parent();
                if (parent.hasClass('active')) {
                    $(".sublist:first", parent).hide(300);
                    parent.removeClass('active');
                } else {
                    $(".sublist:first", parent).show(300);
                    parent.addClass('active');
                }
            });
        });
    </script>
}
